<template>
	<view class="u-p-30">
		<view class="answer">
			<view class="">
				<view class="u-m-b-15">撰写答案</view>
				<!-- #ifdef MP-WEIXIN || APP-PLUS || H5 -->
				<fa-editor ref="faEditor" :isVoice="is_voice"></fa-editor>
				<!-- #endif -->
				<!-- #ifdef MP-BAIDU || MP-ALIPAY -->
				<fa-markdown ref="faMark"></fa-markdown>
				<!-- #endif -->
				<!-- 付费观看 -->
				<view class="u-p-30 u-m-t-30" :style="[{ backgroundColor: btnBgColor(false) }]" v-if="isPeep">
					<u-form :model="form" :rules="rules" ref="uForm">
						<u-form-item label-position="left" label="付费查看" label-width="150" prop="peeptype">
							<u-radio-group v-model="peeptype">
								<u-radio
									:active-color="theme.bgColor"
									shape="circle"
									v-if="vuex_config.peeptype == 'both' || vuex_config.peeptype == 'price'"
									name="price"
								>
									设定金额
								</u-radio>
								<u-radio
									:active-color="theme.bgColor"
									shape="circle"
									v-if="vuex_config.peeptype == 'both' || vuex_config.peeptype == 'score'"
									name="score"
								>
									设定积分
								</u-radio>
							</u-radio-group>
						</u-form-item>

						<u-form-item label-position="left" :label="peeptype == 'score' ? '积分' : '金额'" prop="code" label-width="70">
							<input
								class="moneyinput"
								:placeholder="
									`请输入付费查看的${peeptype == 'score' ? '积分' : '金额'}，${peeptype == 'score' ? '积分' : '金额'}区间:${
										peeptype == 'score' ? vuex_config.peepscore : vuex_config.peepprice
									}`
								"
								v-model="price"
								type="number"
							/>
						</u-form-item>

						<view class="u-p-t-20">
							<view class="u-flex u-flex-wrap">
								<view class="flex-price" v-for="(item, index) in peeppricelist" :key="index">
									<u-button
										hover-class="none"
										type="primary"
										:custom-style="{
											height: '60rpx',
											backgroundColor: btnBgColor(item.check),
											color: btnColor(item.check),
											border: '1px solid ' + theme.faBorderColor
										}"
										throttle-time="0"
										@click="selectPrice(item.value, index)"
									>
										{{ item.key }}
									</u-button>
								</view>
							</view>
						</view>
						<view class="u-p-t-30">
							<view class="">1. 如果设定了付费查看，则此回答只有提问者、回答者和管理员可以查看</view>
							<view class="">
								2. 如果提问者采纳了此回答，则付费查看生效(会员需要支付你设定的费用才能查看)，如果采纳了其它答案，付费查看失效(此时全体可见)
							</view>
							<view class="">3. 如果提问者在 7 天后仍未采纳最佳答案，则所有付费查看失效(此时全体可见)</view>
						</view>
					</u-form>
				</view>
				<fa-captchaparts ref="captcha" label-position="left" :custom-style="{ paddingTop: '15rpx' }" mode="postanswer" v-model="captcha"></fa-captchaparts>
				<view class="u-p-30 u-flex u-row-center" v-if="vuex_token">
					<view class="u-p-r-15">
						<u-button
							hover-class="none"
							type="primary"
							:custom-style="{
								backgroundColor: btnBgColor(true),
								color: btnColor(true),
								width: this.vuex_config.peeptype == 'none' ? '80vw' : '30vw'
							}"
							@click="sumitAnswer"
						>
							提交答案
						</u-button>
					</view>
					<view class="u-flex">
						<u-button
							v-if="vuex_config.peeptype != 'none'"
							hover-class="none"
							type="primary"
							class="u-m-r-15"
							throttle-time="0"
							:custom-style="{ backgroundColor: btnBgColor(false), color: btnColor(false), border: '1px solid ' + theme.faBorderColor }"
							@click="showPeep"
						>
							付费查看
						</u-button>
						<!-- #ifdef MP-WEIXIN || APP-PLUS -->
						<u-button
							hover-class="none"
							throttle-time="0"
							type="primary"
							:custom-style="{ backgroundColor: btnBgColor(false), color: btnColor(false), border: '1px solid ' + theme.faBorderColor }"
							@click="is_voice = !is_voice"
						>
							{{ !is_voice ? '语音回答' : '文本回答' }}
						</u-button>
						<!-- #endif -->
					</view>
				</view>
			</view>
			<view class="u-p-30" v-if="!vuex_token">
				<u-button hover-class="none" type="primary" :custom-style="{ backgroundColor: btnBgColor(true), color: btnColor(true) }" @click="goLogin">
					去登录
				</u-button>
			</view>
		</view>
		<!-- 顶部提示 -->
		<u-top-tips ref="uTips" :navbar-height="statusBarHeight + navbarHeight"></u-top-tips>
	</view>
</template>

<script>
// 撰写答案
export default {
	name: 'fa-write-answer',
	props: {
		detail: {
			type: Object,
			default: {}
		}
	},
	watch: {
		peeptype(newValue, oldValue) {
			let list = newValue == 'price' ? this.vuex_config.peeppricelist : this.vuex_config.peepscorelist;
			this.peeppricelist = [];
			for (let i in list) {
				this.peeppricelist.push({
					key: i,
					value: list[i],
					check: false
				});
			}
		}
	},
	mounted() {
		if (this.vuex_config.peeptype == 'both') {
			this.peeptype = 'price';
		} else if (this.vuex_config.peeptype) {
			this.peeptype = this.vuex_config.peeptype;
		} else {
			this.peeptype = 'price';
		}
	},
	data() {
		return {
			// 状态栏高度，H5中，此值为0，因为H5不可操作状态栏
			statusBarHeight: uni.getWindowInfo().statusBarHeight,
			// 导航栏内容区域高度，不包括状态栏高度在内
			navbarHeight: 44,
			textareaData: '',
			is_voice: false,
			form: {},
			rules: {},
			priceList: [1, 2, 5, 10],
			price: '',
			peeptype: '',
			isPeep: false,
			captcha: ''
		};
	},
	methods: {
		//登录
		goLogin() {
			this.$wanlshop.to('/pages/community/login/mobilelogin');
		},
		//开启付费查看
		showPeep() {
			if (this.detail.is_peep_disabled) {
				this.$refs.uTips.show({
					title: `当前无法进行付费查看设定，原因：${this.detail.peep_disabled_reason}`,
					type: 'error',
					duration: '5000'
				});
				return;
			}
			this.isPeep = !this.isPeep;
		},
		//选择数量
		selectPrice(value, index) {
			this.peeppricelist.forEach(item => {
				item.check = false;
			});
			this.price = value;
			this.$set(this.peeppricelist[index], 'check', true);
		},
		//提交答案
		sumitAnswer: async function() {
			// #ifdef MP-WEIXIN || APP-PLUS || H5
			let content = await this.$refs.faEditor.getData();
			// #endif
			// #ifdef MP-BAIDU || MP-ALIPAY
			let content = this.$refs.faMark.getData();
			// #endif
			let res = await this.$api.goAnswerPost({
				type: 'question',
				id: this.detail.id,
				content: content,
				switchpeeptype: this.peeptype,
				price: this.peeptype == 'price' ? this.price : '',
				score: this.peeptype == 'score' ? this.price : '',
				subscribe: 1,
				captcha: this.captcha
			});
			this.$u.toast(res.msg);
			if (!res.code) {
				this.$refs.captcha.getCaptcha();
				return;
			}
			this.price = '';
			// #ifdef MP-WEIXIN || APP-PLUS || H5
			this.$refs.faEditor.setData('');
			// #endif
			// #ifdef MP-BAIDU || MP-ALIPAY
			this.$refs.faMark.setData('');
			// #endif
			this.$emit('toadd', res.data.answer);
		}
	}
};
</script>

<style lang="scss" scoped>
.answer {
	background: #ffffff;
	padding: 30rpx;
	box-shadow: 0px 0px 3px 0px rgba(0, 78, 255, 0.1);
}
.flex-price {
	width: 25%;
	padding: 10rpx;
}
.moneyinput {
	padding: 0 15rpx;
	border-color: rgb(220, 223, 230);
	text-align: left;
	background-color: rgb(255, 255, 255);
	border-radius: 10rpx;
	width: 90%;
	font-size: 26rpx;
}
.u-input--border {
	background-color: #ffffff;
}
</style>
